<template>
	<view>
		<view class="np-nav" :class="[bgRound ? 'module-box' : '']" v-if="navs.length > 0">
			<view class="np-nav-item" v-for="(item,nav) in navs" :key="nav" @click="listTap(item)" v-if="nav < 10">
				<image class="np-nav-icon" :class="[round ? 'np-icon-radius' : '']" :src="item.image || item.icon"></image>
				<text class="np-nav-text">{{item.title}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'npGrid',
		props: {
			navs: {
				type: Array,
				default: () => {
					return []
				}
			},
			navSearch: {
				type: Boolean,
				default: false
			},
			bgRound: {
				type: Boolean,
				default: false
			},
			round: {
				type: Boolean,
				default: false
			},
		},
		methods: {
			listTap(item) {
				if (this.navSearch) {
					item.url = "/pages/search/search?keyword=" + item.keyword + "&title=" + item.title;
				}
				this.$config.navTo(item);
			}
		}
	}
</script>

<style>
	.white-bg {
		background: #FFFFFF;
	}

	.np-nav {
		display: flex;
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;
	}

	.np-nav-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 145rpx;
		margin: 12rpx 0;
	}

	.np-nav-icon {
		width: 88rpx;
		height: 88rpx;
		margin-bottom: 18rpx;
	}

	.np-icon-radius {
		border-radius: 50%;
	}

	.np-nav-text {
		color: #3c3c3c;
		font-size: 24rpx;
	}
</style>
